<template>
  <div class="action-bar">
    <div class="btn-list">

      <!-- <div v-if="hasFuncAuth&& judgePermission(pageNo, 'func')" class="btn-item"> -->

      <div v-if="hasAssignRole&& judgePermission(pageNo, 'role')" class="btn-item">
        <img
          v-if="assignRole"
          src="~@/assets/action-bar-icon/assign-role-active.png"
          @click="assignRoleShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/assign-roles-no.png"
        />
      </div>
      <!-- <div v-if="hasAdd&& judgePermission(pageNo, 'add')" class="btn-item"> -->
      <div v-if="hasAdd" class="btn-item">
        <img
          v-if="addActive"
          src="~@/assets/action-bar-icon/add-active.png"
          @click="add"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/add.png"
        />
      </div>
      <!-- <div v-if="hasEdit&& judgePermission(pageNo, 'edit')" class="btn-item"> -->
      <div v-if="hasEdit" class="btn-item">
        <img
          v-if="editActive"
          src="~@/assets/action-bar-icon/edit-active.png"
          @click="edit"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/edit.png"
        />
      </div>
      <!-- <div v-if="hasDel&& judgePermission(pageNo, 'delete')" class="btn-item"> -->
      <div v-if="hasDel" class="btn-item">
        <img
          v-if="delActive"
          src="~@/assets/action-bar-icon/del-active.png"
          @click="del"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/del.png"
        />
      </div>
      <div v-if="hasSave" class="btn-item">
        <img
          v-if="saveActive"
          src="~@/assets/action-bar-icon/save-active.png"
          @click="save"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/save.png"
        />
      </div>
      <div v-if="hasCancel" class="btn-item">
        <img
          v-if="cancelActive"
          src="~@/assets/action-bar-icon/cancel-active.png"
          @click="cancel"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/cancel.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: "",
  components: {},
  props: {
    pageNo: {
      type: Number,
      default: null
    },
    // 维修作废
    hasCancellation: {
      type: Boolean,
      default: false
    },
    cancellationActive: {
      type: Boolean,
      default: false
    },
    // 再次申请
    hasAuditAgain: {
      type: Boolean,
      default: false
    },
    auditAgainActive: {
      type: Boolean,
      default: false
    },
    // // 验收通过
    // hasAcceptance: {
    //   type: Boolean,
    //   default: false
    // },
    // acceptanceActive: {
    //   type: Boolean,
    //   default: false
    // },
    // // 验收不通过
    // hasNoAcceptance: {
    //   type: Boolean,
    //   default: false
    // },
    // noAcceptanceActive: {
    //   type: Boolean,
    //   default: false
    // },
    // 审核通过
    hasCheck: {
      type: Boolean,
      default: false
    },
    checkActive: {
      type: Boolean,
      default: false
    },
    // 审核不通过
    hasNocheck: {
      type: Boolean,
      default: false
    },
    nocheckActive: {
      type: Boolean,
      default: false
    },
    // 功能权限
    hasFuncAuth: {
      type: Boolean,
      default: false
    },
    funcAuthActive: {
      type: Boolean,
      default: false
    },
    // App功能权限
    hasAppAuth: {
      type: Boolean,
      default: false
    },
    funcAppAuthActive: {
      type: Boolean,
      default: false
    },
    // 角色分配
    hasAssignRole: {
      type: Boolean,
      default: false
    },
    assignRole: {
      type: Boolean,
      default: false
    },
    // // 用户
    // hasAssignUser: {
    //   type: Boolean,
    //   default: false
    // },
    // assignUser: {
    //   type: Boolean,
    //   default: false
    // },
    // 添加
    hasAdd: {
      type: Boolean,
      default: true
    },
    addActive: {
      type: Boolean,
      default: true
    },
    // 修改
    hasEdit: {
      type: Boolean,
      default: false
    },
    editActive: {
      type: Boolean,
      default: false
    },
    // 删除
    hasDel: {
      type: Boolean,
      default: true
    },
    delActive: {
      type: Boolean,
      default: false
    },
    // 保存
    hasSave: {
      type: Boolean,
      default: false
    },
    saveActive: {
      type: Boolean,
      default: false
    },
    // 取消
    hasCancel: {
      type: Boolean,
      default: false
    },
    cancelActive: {
      type: Boolean,
      default: false
    },
    // // 查看用户
    // hasEmployee: {
    //   type: Boolean,
    //   default: false
    // },
    // employeeActive: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    add() {
      this.$emit("add");
    },
    edit() {
      this.$emit("edit");
    },
    del() {
      this.$emit("del");
    },
    save() {
      this.$emit("save");
    },
    // 再次申请
    auditAgainShow() {
      this.$emit("auditAgain");
    },
    // 验收通过
    acceptanceShow() {
      this.$emit("acceptance");
    },
    // 验收不通过
    noAcceptanceShow() {
      this.$emit("noAcceptance");
    },
    // 审核通过
    checkShow() {
      this.$emit("check");
    },
    // 审核不通过
    nocheckShow() {
      this.$emit("nocheck");
    },
    // 处理
    handleShow() {
      this.$emit("handle");
    },
    // 功能权限
    funcAuthShow() {
      this.$emit("funcAuth");
    },
    // App功能权限
    funcAppAuthShow() {
      this.$emit("funcAppAuth");
    },
    // 数据权限
    dataAuthShow() {
      this.$emit("dataAuth");
    },
    // 分配角色
    assignRoleShow() {
      this.$emit("assignRole");
    },
    assignRoleUser() {
      this.$emit("assignRoleUser");
    },
    cancel() {
      this.$emit("cancel");
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.action-bar {
  width: 100%;
  height: $actionBarHeight;
  border-radius: 5px;
  background-color: $actionBarBgColor;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .btn-list {
    display: flex;
    align-items: center;
    padding-right: 18px;
    .btn-item {
      margin-left: 15px;
      img {
        height: 30px;
        cursor: pointer;
      }
      .not-allowed {
        cursor: not-allowed;
      }
    }
  }
}
</style>
